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ABSTRACT 



Computer Assisted Instruction (CAI) is, quite simply, an 
instance in which instructional content activities are delivered via a 
computer. Many commercially-available software programs, although excellent 
programs, may not be acceptable for each individual teacher's classroom. One 
way to insure that software is not only acceptable but also targets a 
teacher's class in a specific way, is for instructors to design their own 
software. The HyperCard authoring system is a computer program that enables 
teachers, even those with minimal programming ability, to easily design their 
own hypermedia software programs for use in individualized situations. 
Teachers now have an easy method to teach, drill, remediate, or even test 
individual classes or students by designing software that targets these 
classes or individuals. This paper discusses setting up to design or create a 
software program; designing the software; adding buttons, fields and graphics 
to the stack/program; and scripting in HyperCard. (Author/AEF) 
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Abstract: Computer Assisted Instruction (CAI) is, quite simply, an instance in 
which instructional content activities are delivered via a computer. Many 
commercially-available software programs, although excellent programs, may not 
be acceptable for each individual teachers classroom. 

One way to insure that software is not only acceptable but also targets a teacher’s 
class in a specific way, is for instructors to design their own software. The 
HyperCard authoring system is a computer program that enables teachers or 
instructors, even teachers with minimal programming ability, to easily design their 
own hypermedia software programs for use in individualized situations. Teachers 
now have an easy method to teach, drill, remediate, or even test individual classes 
or students by designing software that targets these classes or individuals. 



HyperCard is an authoring system which makes it possible for nonprofessional programmers to create 
original working software applications. It is well suited for building customized personal information 
managers, educational tutorials, multimedia presentations, and user interfaces to other, less-friendly programs. 

Setting Up to Design or Create Your Own Software Program 

HyperCard has several “levels” that you can utilize in creating software. Since we will be authoring 
software and also writing our own scripts, we should select the highest or scripting level. To select this level: 

• Double click on the HyperCard icon to open it. 

• You will then see the Home Card. Click on the arrow in the bottom left of the card and you will see 
the levels-choice card. Click on level 5 and when it highlights, you will have set your HyperCard to 
the scripting level. 

• Now, click on the arrow to the bottom right of the card and you will return to the Home Card. You 
only have to set this level once. 

You are now ready to begin setting up you HyperCard. 

• While in the Home Card, select New Stack from the FILE menu. In the resulting dialog box, type 
in a descriptive name for your stack under New Stack Name. 

• Click on Desktop then double click on your data disk. This is where the stack will be saved 
automatically. 

• Click on New and you will then see the first blank page or card of your new stack. 

• You are now ready to begin designing your stack or software program. 



Designing Your Own Software 

Once you have completed the set-up for your stack, as described above, and your first blank card 
appears, a good idea is to place your tools palette in a convenient place on your screen. To do this, select 
Tools from the menu bar, drag through the palette, and place it in a convenient place. The tools palette, as 
shown in Figure 1, contains all the normal paint tools and also a browse tool, button tool, and a field tool. 
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Figure 1: Tool Palette indicating the paint tools and the Browse, Button, and Field tools. 

You can use the tools to add text to your cards, draw on the cards, add Art Bits to the cards, erase 
mistakes, add a pattern to your graphics, etc. 

You may decide to design a background for your stack. To do this, select Background from the 
EDIT menu, design your background, then reselect Background to return to your card layer. The background 
you design will appear on every page/card of you stack unless you decide to change it later. You can add a 
border around the edge of each card, put your name on each cards, add a graphic to each card. Remember, 
what you put in the background will appear on each and every card in your stack. 

Add Buttons to Your Stack 



One of the most necessary aspects of your stack/program is to have a method by which students and 
“navigate” throughout the stack/program. To do this you must add buttons to each card/page. On these 
buttons you tell the program to go to the card you indicate. 

To add a button to a card, click on the Button Tool on your tool palette then select New button from 
the OBJECTS menu. A “new button” icon will appear in the middle of you card and will have dashed edges. 
You can click on this icon and move it any where on the card. 

Double click on the “new button” icon and you will see the dialog box as shown in Figure 2: 
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Figure 2: Button Dialog Box for Customizing and Linking Buttons. 

As can be assumed from the above dialog box, you can give your button a name, choose a text style, 
select from numerous icons which turn your button from a round rectangle into a descriptive graphic, can 
select from a whole line of effects that will occur when the student clicks on the button, and most importantly, 
can link this card to any other card in the stack or to another stack. 

Once you decide on a button style, click on OK and the newly designed button will appear on the 
card. You can resize it by clicking on the button, click on a comer, then drag it to any size you wish. 

Notice that one of the choices from the dialog box is Script. HyperCard will automatically add the 
script to the buttons as you design and link your buttons but you do have the ability to add to that script to have 
the button play sounds, add 1 to a correct or incorrect field so the program will tell the student how many 
correct or incorrect answers s/he has clicked on in questions in the program, slow down or speed up the effects, 
etc., etc., etc. 

Adding Fields to Your Stack 

When you click on the “A” tool on your tool palette you will be typing in bit-mapped text onto your 
card. It is much easier to create a field and type into the field because this will add word-processed text. 
Word-processed text is much easier to work with and edit than drawn-in or bit-mapped text. 

To add a field to your card, first select the Field tool from your tool palette and next select New Field 
from the Objects choice on the menu bar. A new field will appear in the middle of your card, also with a 
dashed-line outline as with a button. You can change the size of the field by the same method you changed the 
size of a button, by grasping a comer of the field and resizing by dragging. 

Double click on the new field and a dialog box, similar to a button dialog box will appear as show in 

figure 3. 
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Figure 3: Field Dialog Box for Customizing Fields. 



As can be seen, you can change the Text Style, Field Style, name the field, as you did with the 

buttons. 

To type in the field, select the Browse tool from the tool palette, click in the field, and when a 
blinking cursor appears you can type in the field as with a word processor. You can always change the size of 
the field if you find you need more room to type in the information. 



Adding Graphics to Your Program 



Contained in you HyperCard program are a series of graphics that can be incorporated into you stack. 
You may have noticed this stack called Art Bits on your Home Card. 

Procedure: 

• Select Home from the GO menu; you will see the Home Card containing several special stacks. 

• Click once on the Art Bits icon and an Art Bits icon menu will appear. 

• Click once on the category you prefer (Beasts, Nature and Science, Transportation, etc.) and you 
will see the graphics for that category displayed on one or more screens. 

• Determine which graphic you want than click on either the Capture tool or the Lasso tool and 
“capture” the graphic. 

• Select Copy from the EDIT menu and the graphic will be placed on your clipboard. 

• Select Open Stack from the FILE menu, locate your stack from the dialog box, then click on open 
or double click on the name of your stack. 

• Find the card/page where you want to place the graphic and select Paste Picture from the FILE 
menu. The graphic will be copied to your page/card. 

• Because the graphic will be placed on your card/page in “capture” mode, you can click on the 
graphic and drag it to where you want to place it on the page/card. 

• You can also place graphics from another graphics package into your stack in a similar fashion. 

Scripting in HyperCard 

Your HyperCard program can be enhanced by scripting, that is writing sets of instructions, called 
scripts, to customize HyperCard’s actions. Everything that happens in HyperCard is directed by a script. 
HyperCard scripts are written in HyperTalk language, which is very much like the language people use in 
daily life. Although HyperCard automatically scripts when you select tasks from the button or field dialog 
boxes, you can add much more power to your program when you add your own scripts. Following are several 
scripting sequences that you can add to your program. 

Some basic assumptions for the following scripting examples: 

•Card field “corr” indicates total correct' answers. 

•Card field “incorr” indicates total incorrect answers. 

•Card field “percent” indicates percentage of correct answers. 

•Card field “first” indicates a student’s first name. 

•Card field “both” indicates a student’s first and last name. 

To Ask the Name of A Student 

You can have HyperCard ask the name of a student and display his/her name throughout the program. 
On the card where you want to ask for a name, select Card information from the OBJECTS menu. Click on 
the Script button in the dialog box and type in the following script: 
on openCard 
global name 

ask “Please type in your first and last name.” 
put it into name 

put first word of name into card field “first” 
end openCard 

To put the student’s first name on the card where you first ask his name, select New Field from the 
OBJECTS menu and in the dialog box name the field “first” (without the quotation marks) 

To Put First Name on Any Card 

On any card where you want to put the student’s first name, again select Card information from the 
OBJECTS menu, click on script, and type in the following script: 
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on openCard 
Global name 

put first word of name into card field “first” 
end openCard 

As before, you must have a field on that card named “first” (without the quotation marks. 

To Put the First and Second Name on Any Card 

on openCard 
global name 

put name into card field “both” 
end openCard 

Again, you must have a field on that card named “both” (without the quotation marks” 

Summary Card 

You may have questions as part your program and would like to have students print out a summary 
card indicating how many they answered correctly and incorrectly and the percentage correct. To do this, you 
may design a summary card similar to Figure 4, 



print button 




Figure 4 : Sample Summary Card 

To add the numbers to the field corr and incorr, you must place the following scripts on each answer 
button you have in the program : 
on mouseUp 

Add 1 to card field “corr” of card id xxxx (the card id of your summary card) 
end mouseUp 

on mouseUp 

Add 1 to card field “incorr” of card id xxxx (the card id of your summary card” 
end mouseUp 

You’ll also need to script the summary card so the percentage of correct answers can be calculated 
and placed in the field “percent”. Use the following script on the card: 
on openCard 

set numberFormat to “00,” 

put card field “corr”/10*100 & “%” into card field “percent” 
end openCard 
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As you can see, the number correct located in the field corr will be divided by the number of 
questions in your program (in this case 10), be multiplied by 100 and this number and the % sign will be 
placed into the field percent. 

The Print button can be scripted easily: 

on mouseUp 

doMenu Print HyperCard 
end mouseUp 

Other Scripting Possibilities 

There are many other scripting features available to enhance your HyperCard stacks: 

• An “answer” script where you can pose a question in the script, label the responses you want, and 
the program will automatically show a dialog box for the student where s/he clicks on an appropriate 
response. This is good for a ‘do you want to go on’ type of questions. 

• A “wait” script where you indicate the time variable before some event happens in the program. 

Good or showing a field or a card for a length of time then hiding the field or linking to another card. 

• A “mouseEnter” command where as soon as the mouse enters a field a specified event will occur. 
Good for giving ‘hints’ on questions. 

• You can also script and use the if-then-else parameters, and others. 

The scripting possibilities are almost limitless . . . but they take a little more time and, in some cases,, 
more scripting expertise than is normally required. 
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